<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
    <!-- 引入layui css -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <!-- 引入layui js -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!-- 引入jquery js -->
    <!--  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
</head>
<body>
<div class="layui-fluid">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" autocomplete="off" class="layui-input" placeholder="请输入姓名">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <select name="sex" id="sex">
                        <option value="">请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="birthday" id="birthday2" placeholder="yyyy-MM-dd"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-normal layui-icon layui-icon-search
                          " lay-submit lay-filter="search">查找
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>

    <!--<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form">
      <input type="hidden" name="id">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="1" title="男" checked="">
          <input type="radio" name="sex" value="2" title="女">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-block">
          <input type="text" name="birthday"  id="birthday" lay-verify="date" placeholder="yyyy-MM-dd"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">注册日期</label>
        <div class="layui-input-block">
          <input type="text" name="registTime" id="registTime" lay-verify="date" placeholder="yyyy-MM-dd"
                 autocomplete="off"
                 class="layui-input">
        </div>
      </div>
    </form>
  </script>-->

    <!--新增用户-->
    <form class="layui-form" action="" method="post" lay-filter="addForm" id="add"
          style="display: none;padding-right: 20px;">
        <!-- 所有表单元素必须放置到div容器中，并且添加 class="layui-form-item"-->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday" id="birthday" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>


    <!--编辑用户-->
    <form class="layui-form" action="" method="post" lay-filter="editForm" id="edit"
          style="display: none;padding-right: 20px;">
        <!-- 所有表单元素必须放置到div容器中，并且添加 class="layui-form-item"-->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday" id="birthday1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>

    <!-- 表头左侧按钮 -->
    <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button id="delAll" type="button" class="layui-btn layui-btn-danger layui-icon layui-icon-delete">批量删除
        </button>
        <button id="addUser" type="button" class="layui-btn layui-btn-warm layui-icon layui-icon-addition">添加
        </button>
        <button id="exportAll" type="button" class="layui-btn layui-btn-warm layui-icon layui-icon-addition">全量导出
        </button>
        <button  id="test1" type="button" class="layui-btn">
            <i class="layui-icon">&#xe67c;</i>上传文件
        </button>
    </div>
    </script>

    <!-- 表格数据 -->
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-hide" id="userTable" lay-filter="user"></table>
        </div>
    </div>
</div>

<!-- 给表表格中最后一列添加操作按钮 -->
<script type="text/html" id="opration">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="resetPwd">重置密码</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use(['table', 'form', 'laydate', 'layer','upload'], function () {
        $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var upload = layui.upload;
        //加载表格数据,执行渲染
        table.render({
            elem: '#userTable'  //html中table标签的id
            , height: 350
            , url: '/user/findAll' //数据接口
            , page: true //开启分页
            , page: {
                //分页参数设置
                limit: 5,
                limits: [5, 10, 20, 30]
            },
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            }
            , cols: [[ //表头
                // {type:"checkbox"},
                {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'name', title: '姓名'}
                , {field: 'sex', title: '性别'}
                , {field: 'password', title: '密码'}
                , {field: 'birthday', title: '生日'}
                , {field: 'registTime', title: '注册时间'}
                , {field: 'filepath', title: '头像路径'}
                /*, {
                    field: 'available', title: '是否可用', templet: function (d) {
                        return d.available == 1 ? "可用" : "不可用";
                    }
                }*/
                , {field: 'right', width: 280, title: '操作', align: 'center', toolbar: '#opration'}
            ]],
            toolbar: '#toolbarDemo',
            //头部工具栏右侧图标
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示' //标题
                , layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                , icon: 'layui-icon-tips' //图标类名
            }]
        });

        laydate.render({
            elem: '#birthday'
        })
        laydate.render({
            elem: '#registTime'
        })
        laydate.render({
            elem: '#birthday1'
        })
        laydate.render({
            elem: '#registTime1'
        })
        laydate.render({
            elem: '#birthday2'
        })

        /*//工具条事件
        table.on('tool(user)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            console.log(data)
            console.log(layEvent)
            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });*/

        //表格数据重载
        function refreshtable() {
            //获取查询条件
            var name = $("#name").val();
            var sex = $("#sex").val();
            var birthday2 = $("#birthday2").val();
            console.log(name)
            console.log(sex)
            console.log(birthday2)
            table.reload('userTable', {
                url: "/user/findByName",
                where: { //设定异步数据接口的额外参数，任意设
                    name: name,
                    sex: sex,
                    birthday: birthday2
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
        };

        //批量删除
        $("#delAll").click(function () {
            //获取选中行数据
            var checkStatus = table.checkStatus('userTable').data;
            console.log(checkStatus)
            //判断是否有选中数据
            if (checkStatus.length > 0) {
                layer.confirm("确定要删除选中数据吗？", {icon: 3, title: "提示"}, function (index) {
                    //定义集合存放数据
                    var ids = new Array();
                    for (var i = 0; i < checkStatus.length; i++) {
                        num = checkStatus[i].id;
                        console.log(num);
                        //将待删除的数据id存入集合中
                        ids.push(num);
                    }
                    $.ajax({
                        url: "/user/deleteById",
                        data: {"arrIds[]": ids},
                        type: "post",
                        success: function (obj) {
                            if (obj.status = 1) {
                                layer.msg(obj.msg);
                                refreshtable();
                            }
                        }
                    }),
                        layer.close(index);
                })
            } else {
                layer.alert("请至少选择一条要删除的记录！")
            }
        });


        //新增用户
        $("#addUser").click(function () {
            //清空表单数据
            $("#add")[0].reset();
            form.render();
            //将弹出层修改显示出来
            layer.open({
                type: 1,// 消息框，没有确定按钮
                title: ["添加操作", "padding-left:10px;font-weight:bold;"], // 标题，及标题样式
                content: layui.$("#add"), // dom格式，要显示的内容，与上面的div块的id绑定
                offset: '5px',//可以在右下角显示
                shade: [0.3, 'gray'], //是否遮罩，如果不显示遮罩为0，显示可设置透明度和颜色
                area: ['600px', '500px'],
                resize: false,//不允许改变弹出层大小
                btn: ["提交", "关闭"],
                yes: function (index) {
                    var data = form.val("addForm");
                    // console.log(data)
                    $.post("/user/addUser", data, function (obj) {
                        layer.msg(obj.msg);
                        refreshtable();
                        //根据弹出层下标关闭弹出层
                        layer.close(index);
                    }, "json")
                }
            });
        });

        //全量导出
        $("#exportAll").click(function () {
            console.log("点击了导出按钮")
            $.ajax({
                url: "/user/download",
                type: "get",
                success: function (obj) {
                    console.log(obj)
                    layer.msg(obj.msg);
                    window.location.href="/download?filename=" + obj.data;
                }
            })
        });


        //表格工具条事件
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            console.log(data)
            // console.log(obj)
            //编辑
            if (obj.event == "edit") {
                //回显数据
                form.val("editForm", data);
                layer.open({
                    type: 1,// 消息框，没有确定按钮
                    title: ["编辑操作", "padding-left:10px;font-weight:bold;"], // 标题，及标题样式
                    content: layui.$("#edit"), // dom格式，要显示的内容，与上面的div块的id绑定
                    offset: '5px',//可以在右下角显示
                    shade: [0.3, 'gray'], //是否遮罩，如果不显示遮罩为0，显示可设置透明度和颜色
                    area: ['600px', '500px'],
                    resize: false,//不允许改变弹出层大小
                    btn: ["提交", "关闭"],
                    yes: function (index) {
                        var data2 = form.val("editForm");
                        data2.id = data.id;
                        console.log(data2)
                        $.post("/user/updateUser", data2, function (obj) {
                            layer.msg(obj.msg);
                            refreshtable();
                            //根据弹出层下标关闭弹出层
                            layer.close(index);
                        }, "json")
                    }
                });
            }
            if (obj.event == "") {

            }
        })

        //按条件搜索查询
        form.on("submit(search)", function (obj) {
            refreshtable();
            return false;
        })

        //文件上传
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/user/upload/' //上传接口
            ,accept: 'file'
            ,done: function(res){
                //上传完毕回调
                layer.msg(res.msg);
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>
</body>
</html>